import * as Vue from 'vue'
// import { mapActions } from 'vuex'
// import store from '@/store'
const app = Vue.createApp({});
app.directive('drawerDrag', {
  bind(el, binding, vnode, oldVnode) {
    const minWidth = 400
    const dragDom = el.querySelector('.ant-drawer')
    // dragDom.style.overflow = 'auto'

    const resizeElL = document.createElement('div')
    const img = new Image(124, 138)
    img.src = require('@/assets/img/m27.png')
    img.style.width = '120px'
    img.style.height = '120px'  
    dragDom.appendChild(img)
    dragDom.appendChild(resizeElL)
    dragDom.style.overflow='initial'  
    resizeElL.style.position = 'absolute'
    resizeElL.style.height = '130px'
    resizeElL.style.backgroundColor = 'red'
    resizeElL.style.width = '36px'
    resizeElL.style.left = '435px'
    resizeElL.style.top = '50%'
    resizeElL.style.zIndex = 99
    resizeElL.style.background = '#0071DF'
    resizeElL.style.borderTopLeftRadius = '6px'
    resizeElL.style.borderBottomLeftRadius = '6px'
    resizeElL.style.display = 'flex'
    resizeElL.style.flexDirection = 'row'
    resizeElL.style.justifyContent = 'center'
    resizeElL.style.alignItems = 'center'
    resizeElL.style.cursor = 'pointer' 
    resizeElL.appendChild(img) 
     


    resizeElL.onmousedown = (e) => {
      // store.dispatch('map/handledrawer') 
      const elW = dragDom.clientWidth
      const EloffsetLeft = dragDom.offsetLeft
      const clientX = e.clientX
      document.onmousemove = function(e) {
        e.preventDefault()
        // 左侧鼠标拖拽位置
        if (clientX > EloffsetLeft && clientX < EloffsetLeft + 10) {
          // 往左拖拽
          if (clientX > e.clientX) {
            dragDom.style.width = elW + (clientX - e.clientX) + 'px'
          }
          // 往右拖拽
          if (clientX < e.clientX) {
            if (dragDom.clientWidth >= minWidth) {
              dragDom.style.width = elW - (e.clientX - clientX) + 'px'
            }
          }
        }
      }
      // 拉伸结束
      document.onmouseup = function(e) {
        document.onmousemove = null
        document.onmouseup = null
      }
    }
  }
})
